<template>
  <l-panel style="padding:0;">
    <template #toolLeft>
      <l-query2
        :labelWidth="0"
        :popoverWidth="240"
        :items="queryItems"
        :formData="queryData"
        :loading="tableLoading"
        @search="handleSearch"
      >
        <template #keyWord>
          <el-input
            v-model="queryData.keyWord"
            :placeholder="$t('please enterquery关键字')"
          ></el-input>
        </template>
        <template #seachDate>
          <l-date
            format="yyyy-MM-dd"
            dateType="daterange"
            v-model="queryData.seachDate"
            :startPlaceholder="$t('开始时间')"
            :endPlaceholder="$t('结束时间')"
          >
          </l-date>
        </template>
      </l-query2>
    </template>
    <template #toolRight>
      <l-tool-btns :hasAdd="false">
      </l-tool-btns>
    </template>
    <l-table
      ref="mainTable"
      :loading="tableLoading"
      :columns="columns"
      :dataSource="tableData"
      :isPage="true"
      :isMultiSelect="true"
      :pageTotal="tableTotal"
      :tablePage.sync="tableCurrentPage"
      rowKey="id"
      @loadPageData="turnTablePage"
    >
      <template v-slot:f_UnitName="scope">
        <el-button @click="handleLook(scope.row)" size="mini" type="text">{{
          scope.row.f_UnitName
        }}</el-button>
      </template>
      <template v-slot:f_MakeTime="scope">
        {{ lr_dateFormat(scope.row.f_MakeTime) }}
      </template>
      <template v-slot:f_IsFinished="scope">
        <el-tag v-if="scope.row.isDelete == 3" size="mini" type="danger"
          >{{$t('作废')}}</el-tag
        >
        <el-tag
          v-else-if="scope.row.f_IsFinished == 1"
          size="mini"
          type="warning"
          >{{$t('结束')}}</el-tag
        >
        <el-tag v-else size="mini" type="success">{{$t("审批中")}}</el-tag>
      </template>
      <l-table-btns
        :isAuth="false"
        :filterBtns="filterBtns"
        :btns="tableBtns"
        @click="lr_handleTableBtnClick"
      ></l-table-btns>
    </l-table>

    <wf-look-form
      ref="form"
      type="look"
      :params="{ taskId: taskId }"
      :isLoadFormData="true"
      :title="title"
      :visible.sync="visible"
      @printDataLoaded="printDataLoaded"
      :wfIsPrints="isPrints"
    >
    </wf-look-form>
  </l-panel>
</template>

<script>
const api = window.$api.workflow.process;
export default {
  data() {
    return {
      queryItems: [
        { prop: "seachDate", span: 24 },
        { prop: "keyWord", span: 24 },
      ],
      queryData: {
        keyWord: "",
        seachDate: "",
      },
      // 表格参数
      tableLoading: false,
      tableData: [],
      tableTotal: 0,
      tableCurrentPage: 1,
      tablePageSize: 50,
      columns: [
        { label: "任务", prop: "f_UnitName", minWidth: 100, align: "left" },
        { label: "标题", prop: "f_ProcessTitle", minWidth: 100, align: "left" },
        { label: "审核", prop: "f_OperationName", width: 100, align: "center" },
        { label: "状态", prop: "f_IsFinished", width: 80, align: "center" },
        {
          label: "提交人",
          prop: "f_ProcessUserId",
          width: 200,
          align: "left",
          dataType: "fullUser",
          isNotAutoWrap: true,
        },
        { label: "时间", prop: "f_MakeTime", width: 160, align: "left" },
      ],
      tableBtns: [{ prop: "Revoke", label: "撤销",width:100 }],

      taskId: "",
      title: "",
      visible: false,
    };
  },
  computed: {},
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.loadTableData();
    },
    handleSearch() {
      this.loadTableData();
    },
    turnTablePage({ rows }) {
      this.tablePageSize = rows;
      this.loadTableData(true);
    },
    async loadTableData(isNotFirst) {
      if (!isNotFirst) {
        this.tableCurrentPage = 1;
      }
      this.tableLoading = true;
      let queryData = this.$deepClone(this.queryData);

      if (queryData.seachDate) {
        const dateList = queryData.seachDate.split(" - ");
        queryData.startDate = dateList[0];
        queryData.endDate = dateList[1];
        queryData.seachDate = null;
      }

      const pagination = {
        rows: this.tablePageSize,
        page: this.tableCurrentPage,
        sidx: "t1.F_CreateDate DESC",
      };

      /*queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 't.F_CreateDate DESC'*/

      let data = await this.$awaitWraper(
        api.getCompletedMyPage(pagination, queryData)
      );
      if (data != null) {
        
        this.tableData = data.rows.map((t,index)=>({...t,id:t.f_Id+index}));
        this.tableTotal = data.records;
      } else {
        this.tableData = [];
      }
      this.tableLoading = false;
    },

    filterBtns(row, btns) {
      if (row.f_IsCancel == 1 && row.f_IsFinished != 1 && row.isDelete != 3) {
        return btns;
      } else {
        return [];
      }
    },

    handleRevoke($index, row) {
      this.$confirm("是否撤销审核?", "Tips", {
        confirmButtonText: this.$t("confirm"),
        cancelButtonText: this.$t("cancel"),
        type: "warning",
      })
        .then(() => {
          api.revokeAudit(row.f_ProcessId, row.f_Id).then(() => {
            this.loadTableData(this.tableTotal > 1);
            this.$message({
              type: "success",
              message: this.$t("撤销成功!"),
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t("已cancel撤销"),
          });
        });
    },

    handleLook(row) {
      this.isPrints = false;
      this.taskId = row.f_Id;
      this.title = `${row.f_ProcessTitle}【${row.f_UnitName}】`;
      this.visible = true;
    },
  },
};
</script>
